<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>首页</title>
		<link rel="stylesheet" href="css/muse-ui.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
		<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
		<link rel="stylesheet" href="css/muse-ui-loading.css">
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_951857_sr7zod4vu4.css">
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_1022050_8sggdui7dh6.css">
		<script src="js/vue.min.js"></script>
		<script src="js/muse-ui.js"></script>
		<script src="js/muse-ui-loading.js"></script>
		<script src="js/muse-ui-toast.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/utils.js"></script>
		<style>
			.container{
				width: 100%;
			}
			.container input {
				color: #ff4081;
			}
			.login-head{
				margin-top: 20%;
				width: 100%;
				text-align: center;
			}
			.icon-denglu{
				color: #fff;
				font-size: 70px;
			}
			.mine{
				height: 150px;
				width: 100%;
				background: linear-gradient(to bottom,#3fccf0,#DBB1FB);
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.gird{
				width: 25%;height: 100px;display: flex;flex-direction: column;align-items: center;justify-content: center;
				position: relative;
			}
			.icon{
				font-size: 38px;
				color: #fff;
				padding: 0 1rem;
				border-radius: 10px;
			}
			.badge{
				position: absolute;
				left: 20px;
				top: -5px;
			}
		</style>
	</head>
	<body>
		<div id="body">
			<div v-if="tabindex=='home'">
				<mu-carousel transition="fade" style="height: 200px;">
					<mu-carousel-item>
						<img src="img/safe.jpg" style="width: 100%;height: 200px;">
					</mu-carousel-item>
					<mu-carousel-item>
						<img src="img/safe1.jpeg" style="width: 100%;height: 200px;">
					</mu-carousel-item>
				</mu-carousel>
				<mu-container>
					<div style="display: flex;flex-wrap: wrap;">
						<div class="gird" @click="util.openWindow('waitingdo.html')">
							<mu-badge :content="waitDoList.length" v-if="waitDoList.length!=0" color="red" circle badge-class="badge"></mu-badge>
							<i class="iconfont icon-daiban icon" style="background-color: #3FCCF0;"></i>
							待办事项
						</div>
						<div class="gird" @click="util.tip('开通中')">
							<i class="iconfont icon-baobiao icon" style="background-color:#FF4081"></i>
							报表
						</div>
						<div class="gird" @click="util.openWindow('conduit.html')">
							<i class="iconfont icon-guanwangyanghu icon" style="background-color: #C8A84A;"></i>
							燃气管网
						</div>
						<div class="gird" @click="util.openWindow('patrolTask.html')">
							<i class="iconfont icon-xunjianguanlixitong icon" style="background-color: #FF6900;"></i>
							管网巡检
						</div>
						<div class="gird" @click="util.openWindow('safeCheck.html');">
							<i class="iconfont icon-anquanjianchaoff icon" style="background-color: green;"></i>
							安全检查
						</div>
						<div class="gird" @click="util.openWindow('my_building_chaobiao.html')">
							<i class="iconfont icon-yuanchengchaobiao icon" style="background-color: #D200FC;"></i>
							抄表
						</div>
						<div class="gird" @click="util.tip('开通中')">
							<i class="iconfont icon-shenhe icon" style="background-color: #0083FC;"></i>
							开户审核
						</div>
						<div class="gird" @click="util.openWindow('my_repair.html')">
							<i class="iconfont icon-baoxiu icon" style="background-color: #FC8200;"></i>
							燃气报修
						</div>
					</div>
				</mu-container>
			</div>
			<div v-else>
				<div class="mine">
					<div class="iconfont icon-denglu"></div>
					<div style="color: #FFFFFF;font-size: 18px;">
						<div>{{worker.name}}&nbsp;&nbsp;<span style="font-size: 14px;transform: scale(.9);">No.{{worker.no}}</span></div>
						<div>{{worker.phone}}</div>
					</div>
				</div>
				<div>
					<mu-list style="background-color: #FFFFFF;">
						<mu-list-item button :ripple="true" @click="util.openWindow('my_build.html')">
							<mu-list-item-action>
								<mu-icon value="home"></mu-icon>
							</mu-list-item-action>
							<mu-list-item-title>我的小区</mu-list-item-title>
							<mu-list-item-action>
								<mu-icon value="keyboard_arrow_right"></mu-icon>
							</mu-list-item-action>
						</mu-list-item>
						<mu-list-item button :ripple="true" @click="util.openWindow('safeCheck.html');">
							<mu-list-item-action>
								<mu-icon value="history"></mu-icon>
							</mu-list-item-action>
							<mu-list-item-title>安全检查</mu-list-item-title>
							<mu-list-item-action>
								<mu-icon value="keyboard_arrow_right"></mu-icon>
							</mu-list-item-action>
						</mu-list-item>
						<mu-list-item button :ripple="true" @click="util.openWindow('my_repair.html')">
							<mu-list-item-action>
								<mu-icon value="build"></mu-icon>
							</mu-list-item-action>
							<mu-list-item-title>燃气报修</mu-list-item-title>
							<mu-list-item-action>
								<mu-icon value="keyboard_arrow_right"></mu-icon>
							</mu-list-item-action>
						</mu-list-item>
						<mu-list-item button :ripple="true" @click="util.openWindow('my_safe.html')">
							<mu-list-item-action>
								<mu-icon value="security"></mu-icon>
							</mu-list-item-action>
							<mu-list-item-title>燃气知识</mu-list-item-title>
							<mu-list-item-action>
								<mu-icon value="keyboard_arrow_right"></mu-icon>
							</mu-list-item-action>
						</mu-list-item>
					</mu-list>
					<mu-divider></mu-divider>

					<mu-list style="background-color: #FFFFFF;margin-top: 30px;">
						<mu-list-item button :ripple="true" @click="util.openWindow('my_changePassword.html')">
							<mu-list-item-action>
								<mu-icon value="lock"></mu-icon>
							</mu-list-item-action>
							<mu-list-item-title>修改密码</mu-list-item-title>
							<mu-list-item-action>
								<mu-icon value="keyboard_arrow_right"></mu-icon>
							</mu-list-item-action>
						</mu-list-item>
					</mu-list>
					<mu-divider></mu-divider>
					<mu-button full-width style="margin-top: 30px;" @click="logout()">退出登录</mu-button>
				</div>
			</div>
			<mu-bottom-nav :value.sync="tabindex" shift style="position: fixed;bottom: 0;width: 100%;" color="primary">
				<mu-bottom-nav-item value="home" title="首页" icon="home"></mu-bottom-nav-item>
				<mu-bottom-nav-item value="my" title="我的" icon="person"></mu-bottom-nav-item>
			</mu-bottom-nav>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#body",
			data() {
				return {
					tabindex: 'home',
					waitingDoTabsIndex: 0,
					worker: {
						name: "",
						phone: ""
					},
					waitDoList: [],
					waitDoCount: 0,
					checkTaskCount: 0
				}
			},
			methods: {
				goWaitDo(waitdDo) {
					if (waitdDo.type == "抄表") {
						util.setData("buildingName", waitdDo.text);
						util.setData("buildingId", waitdDo.id);
						util.openWindow("my_building_meter_chaobiao.html");
					}
					if (waitdDo.type == "维修") {
						util.openWindow("my_repair.html");
					}
					if (waitdDo.type == "检查") {
						util.openWindow("safeCheck.html");
					}
				},
				getWaitingDoList() {
					this.waitDoCount = 0;
					this.checkTaskCount = 0;
					util.ajax("/worker/getWaitingDoList", null, data => {
						this.waitDoList = data.object;
						this.waitDoList.forEach(item => {
							if (item.type == "检查") {
								this.checkTaskCount++;
							} else {
								this.waitDoCount++;
							}
						})
					})
				},
				logout() {
					var res = confirm("确定退出登录?");
					if (res) {
						plus.storage.clear()
						this.tabindex = 'home';
						this.waitingDoTabsIndex = 0;
						this.worker = {
							name: "",
							phone: ""
						};
						this.waitDoList = [];
						this.waitDoCount = 0;
						this.checkTaskCount = 0;
						util.openWindow("login.html")
						plus.webview.currentWebview().close()
					}
				},
				getWorkerByUserId() {
					util.ajax("/api/method/getWorkerByUserId", null, data => {
						if (data.object.length != 0) {
							this.worker = data.object[0];
						}
					})
				}
			}
		})
		var quitFlag = false;
		function init(){
			vm.getWorkerByUserId()
			vm.getWaitingDoList()
		}
		document.addEventListener('plusready', function() {
			init()
			mui.back = function() {
				if (quitFlag) {
					plus.storage.clear()
					plus.runtime.quit();
				} else {
					util.tip("再按一次退出");
					quitFlag = true;
					setTimeout(() => {
						quitFlag = false;
					}, 1500)
				}
			}
		});
	</script>
</html>
